<template>
	<view class="show-box-top">
		
		<!-- 提货信息 -->
		<view class="label-item-box">
			<view class="top-label-box">
				<view class="top-left-name">提货信息</view>
			</view>
			<view class="center-label-box">
				<view class="v-box">
					<view class="v-left-name">提货人</view>
					<view class="v-right-content">{{orderDetail.pick_name}}</view>
				</view>
				<view class="v-box">
					<view class="v-left-name">提货人手机号</view>
					<view class="v-right-content">{{orderDetail.pick_mobile}}</view>
				</view>
				<view class="v-box">
					<view class="v-left-name">提货地点</view>
					<view class="v-right-content">{{ orderDetail.shop.city+orderDetail.shop.address }}</view>
				</view>
				<!-- <view class="v-box">
					<view class="v-left-name">店长方式</view>
					<view class="v-right-content">
						{{ orderDetail.shop.phone }}
						<view class="sub-label-btn" @click="markPhone(orderDetail.shop.phone )">联系店长</view>
					</view>
				</view> -->
			</view>
			<view class="btm-label-box">
				<view class="btm-label-desc">共1件商品 小计： <text class="shop-money">¥ {{orderDetail.pay.pay_type=='3'?orderDetail.pay.haoren_count:orderDetail.pay.price}}</text></view>
			</view>
		</view>
		
		
		<!-- 商品详情 -->
		<view class="label-item-box" v-for="item in orderDetail.goods" :key="item.id">
			<view class="top-label-box">
				<view class="top-left-name">商品详情 (共计<text class="font-color-f1">{{ orderDetail.goods.length }}</text>件商品)</view>
				<view class="top-right-status font-color-f1">{{ orderDetail.state | stateText }}</view>
			</view>
			<view class="center-label-box">
				<view class="center-top-order-detail">
					<view class="left-center-top-order-img"><image :src="$wanlshop.oss(item.image)" mode=""></image></view>
					<view class="right-center-top-order">
						<view class="right-center-top-order-name">{{ item.title }}</view>
						<view class="right-center-top-order-desc">规格: {{ item.difference }}, 数量 {{ item.number }}</view>
						<view class="flex align-center">
							<view style="margin-right: 15rpx;" class="right-center-top-order-money" v-if="Number(item.price)">¥{{ item.price }}</view>
							<view class="right-center-top-order-money" v-if="Number(item.haoren_number)">好人值 {{ item.haoren_number}}</view>
						</view>
					</view>
				</view>
				<view class="center-btm-order-detail">
					<view class="item-center-btm-detail">
						<view class="item-detail">商品金额： <text class="font-color-f2">¥{{ item.price }}</text></view>
						<!-- <view class="item-detail">退款金额： <text class="font-color-f2">¥{{ item.price }}</text></view> -->
					</view>
					<view class="item-center-btm-detail">
						<view class="item-detail">有效金额： <text class="font-color-f2">¥{{ item.price }}</text></view>
						<!-- <view class="item-detail">佣金比例： <text class="font-color-f2">10%</text></view> -->
					</view>
				</view>
			</view>
			<!-- <view class="btm-label-box">
				<view class="btm-label-desc">实际佣金：<text class="shop-money">¥ {{ orderDetail.shop_commission }}</text></view>
			</view> -->
		</view>
		
		
		<!-- 订单信息 -->
		<view class="label-item-box">
			<view class="top-label-box">
				<view class="top-left-name">订单信息</view>
			</view>
			<view class="center-label-box">
				<view class="v-box">
					<view class="v-left-name">订单编号</view>
					<view class="v-right-content">{{ orderDetail.order_no }}</view>
				</view>
				<view class="v-box">
					<view class="v-left-name">下单时间</view>
					<view class="v-right-content">{{ orderDetail.createtime_text }}</view>
				</view>
				<view class="v-box">
					<view class="v-left-name">支付时间</view>
					<view class="v-right-content">{{ orderDetail.paymenttime_text }}</view>
				</view>
				<view class="v-box">
					<view class="v-left-name">商品金额</view>
					<view class="v-right-content">{{ orderDetail.pay.actual_payment }}</view>
				</view>
			</view>
			<view class="btm-label-box">
				<view class="btm-label-desc">合计： 
					<text class="shop-money" v-if="orderDetail.pay.pay_type=='3'">好人值 {{ orderDetail.pay.haoren_count }}</text>
					<text class="shop-money" v-if="orderDetail.pay.pay_type!='3'">¥ {{ orderDetail.pay.actual_payment }}</text>
					<text v-if="orderDetail.pay.pay_type!='3' && orderDetail.pay.haoren_number!=0">+好人值 {{ orderDetail.pay.haoren_number }}</text>
<!-- 					<text v-if="Number(orderDetail.pay.haoren_count)">好人值 {{ Number(orderDetail.pay.pay_type != 2) ? orderDetail.pay.haoren_number : orderDetail.pay.haoren_count }}</text>
 -->				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '', // 订单id,
				orderDetail: {}, // 订单详细数据
			}
		},
		onLoad(option) {
			if(option.id) this.id = option.id;
			this.init()
		},
		filters:{
			stateText(state) {
				let text
				if(state == 1) text = "待付款";
				if(state == 2) text = "待核销";
				if(state == 3) text = '配送中';
				if(state == 9) text = '待自提';
				if(state == 6) text = '已核销';
				if(state == 4) text = '已自提';
				return text
			}
		},
		methods: {
			
			//初始化订单数据
			init() {
				let id = this.id;
				this.$api.get({
					url: '/wanlshop.shop/getOrderInfo',
					data: { id },
					success: res => {
						this.orderDetail = res;
					}
				})
			},
			
			//拨打电话
			markPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style scoped>
	.show-box-top {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}
	.label-item-box {
		width: 100%;
		background-color: white;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.top-label-box {
		display: flex;
		width: 100%;
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		border-bottom: solid 1rpx #f3f3f3;
		align-items: center;
		justify-content: space-between;
	}
	.top-left-name {
		font-size: 32rpx;
		line-height: 26rpx;
		font-weight: bold;
		color: #2a2a2a;
	}
	.top-right-status {
		font-size: 32rpx;
		line-height: 26rpx;
		font-weight: 500;
	}
	.font-color-f1 {
		color:  #ec777b;
	}
	.center-label-box {
		padding: 15rpx 30rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.v-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	.v-left-name {
		font-size: 28rpx;
		color: #9f9f9f;
		line-height: 22rpx;
		font-weight: 500;
		flex-shrink: 0;
		margin-right: 50rpx;
	}
	.v-right-content {
		font-size: 28rpx;
		color: #2d2d2d;
		display: flex;
		align-items: center;
	}
	.sub-label-btn {
		color: #00b26a;
		padding: 10rpx 20rpx;
		border: solid 1rpx #f6f6f6;
		border-radius: 50rpx;
		margin-left: 10rpx;
	}
	.center-top-order-detail {
		width: 100%;
		display: flex;
	}
	.btm-label-box {
		padding: 40rpx 30rpx;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		justify-content: flex-end;
		align-items: center;
		border-top: solid 1rpx #f3f3f3;
	}
	.btm-label-desc {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 28rpx;
	}
	.shop-money {
		font-size: 34rpx;
		line-height: 30rpx;
		color: #ec777b;
	}
	.center-top-order-detail {
		display: flex;
		margin-bottom: 30rpx;
	}
	.left-center-top-order-img {
		width: 120rpx;
		height: 120rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}
	.left-center-top-order-img image {
		width: 100%;
		height: 100%;
	}
	.right-center-top-order {
		display: flex;
		flex-direction: column;
	}
	.right-center-top-order-name {
		font-size: 26rpx;
		font-weight: 500;
		line-height: 26rpx;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
	}
	.right-center-top-order-desc {
		font-size: 24rpx;
		color: #8f8f8f;
		margin-bottom: 20rpx;
		line-height: 10rpx;
	}
	.right-center-top-order-money {
		font-size: 24rpx;
		font-weight: bold;
		color: #e04d48;
	}
	.center-btm-order-detail {
		display: flex;
		flex-direction: column;
	}
	.item-center-btm-detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	.item-detail {
		font-size: 28rpx;
		color: #8e8e8e;
	}
	.font-color-f2 {
		color: #e04d48;
	}
</style>
